<template>
    <div class="retrospect">
        <!-- <div class="form-item form-item-style1" style="background-color:#fff;margin-left: 0px;
    padding-left: 20px;">
            <div class="label-title">
                <label>单位名称</label>
            </div>
            <div style="width: 45.333vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;"
               >
                {{DeptName}}
            </div><i  @click="companyPropShow = true" class="iconfont icon-jinru rightmsg"></i>
        </div> -->
        <Search @searchAll="search" :isSearchAll="true" :isReport="true"></Search>
        <div class="content">
            <vue-better-scroll
                class="wrapper"
                ref="scroll0"
                :scrollbar="scrollbarObj"
                :pullDownRefresh="pullDownRefreshObj"
                :pullUpLoad="pullUpLoadObj"
                :startY='parseInt(startY)'
                @pullingUp="onPullingUp"
                >
                <noData v-if="!listArr.length"></noData>
                <div v-for="(item, index) in listArr" :key="index" class="item">
                    <div class="left-content">
                        <div class="head-img" v-if="item.imgurl">
                                <img  :src="item.imgurl" alt="">
                        </div>
                        <div class="head-img" v-else>
                                <img v-if="item.Gender=='男'" src="../../assets/avatar2.png" alt="">
                                <img v-if="item.Gender=='女'" src="../../assets/avatar3.png" alt="">
                        </div>
                        <div class="head-info">
                            <h3>{{item.TemperaturePersonName}}</h3>
                            <p>{{item.age}} | {{item.UnitName}}</p>
                        </div>
                    </div>
                    <div class="right-content">
                        <p v-if="item.Temperature>37.2" class="date">体温:{{item.Temperature}} &#8451</p>
                        <p v-else class="dateblue">体温:{{item.Temperature}} &#8451</p>
                        <p>{{item.Operatetime.substr(0,16)}}</p>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
         <addMenu v-if="addPath" @add="add"></addMenu>
         <myMenu ></myMenu>
        <companyProp :companyPropShow="companyPropShow"
                     :selectCompany="selectCompanyTeam"></companyProp>
    </div>
</template>
<script>
import Search from '@commonComponents/search'
import VueBetterScroll from 'vue2-better-scroll'
import myMenu from '@/commonComponents/menu'
import addMenu from '@/commonComponents/addmenu'
import companyProp from '@/commonComponents/companyProp'
export default {
    components: {
        myMenu,
        Search,
        VueBetterScroll,
        addMenu,
        companyProp,
    },
    data () {
        return {
            employeeType:'',
            isCanEdit: true, // 是否可以编辑
            userInfo: {},
            addPath: false,
            itemType: [], // 项目类型(内部管理)
            itemTypeList: [[]], // 项目类
            DeptId: '',
            DeptName: '',
            companyPropShow: false,
            showCheckIndex: 1,
            show: false,
            name1: '',
            name2: '',
            name3: '',
            parmas: {
                pageSize:10,
                pageIndex:1,
                persontype:'',
                unitid:''
            },
            listArr: [],
            total: 0,
            listCount: 0, // 当前列表条数
            nodata: true,
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
        }
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.DeptName = this.unescape(this.userInfo.departName)
        this.parmas.unitid = this.userInfo.departId
        this.employeeType = this.$route.query.type
        if (this.employeeType == 'glry') {
            this.parmas.persontype = '管理人员'
        }
        if (this.employeeType == 'lwry') {
            this.parmas.persontype = '劳务人员'
        }
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.addPath = true
                } else {
                    this.addPath = false
                }
            }
        })
        
        this.onPullingDown()
    },
    methods: {
        //特殊字符转化
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        },
        selectCompanyTeam (item) {
            console.log(item)
            this.DeptName = this.unescape(item.UnitName)
            this.parmas.unitid = item.UnitId
            this.companyPropShow = false
            this.onPullingDown()
        },
        add () {
            this.$router.push(`/thermometryedit?type=${this.employeeType}`)
        },
        search (item) {
            if (item.deptId) {
                this.parmas.unitid = item.deptId
            } else {
                this.parmas.unitid = this.userInfo.departId
            }
            this.parmas.pageIndex = 1;
            this.parmas.personname = item.name
            this.listArr = []
            this.onPullingDown()
        },
        goBack () {
            this.$router.push('/Index/newEdit')
        },
        back () {
            // this.$router.push('./safeCheck')
        },
        routerGo (item) {
            console.log(item, 11)
            window.sessionStorage.setItem('arr', JSON.stringify(item))
            this.$router.push({ path: './safetechLedgerlist',query:{departid:item.DepartId} })
        },
        query () {
            this.dataArr()
        },
        onPullingDown () {
            // 模拟下拉刷新
            //this.listCount = 0
            //this.parmas.data.ProjectItem = this.itemType[0]?this.itemType[0]:'',
            this.$axiosAjax.GetTwtzList(this.parmas).then((res) => {
                if (res.status == 200) {
                    let relist = res.data.data;
                    this.listArr = this.listArr.concat(relist);
                    //this.listArr = res.data.data
                    this.total = res.data.count
                    this.listCount = this.listArr.length
                    if (this.listCount < this.total) {
                        this.$refs['scroll0'].forceUpdate(true)
                    } else {
                        this.$refs['scroll0'].forceUpdate(false)
                    }
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingUp () {
            this.parmas.pageIndex++;
            this.onPullingDown()
            // 模拟上拉 加载更多数据
            // this.$axiosAjax.GetTwtzList(this.parmas).then((res) => {
            // console.log(res, 159)
            //     if (res.status == 200) {
            //         debugger
            //         this.listArr = res.data.data
            //         this.total = res.data.count
            //         this.listCount = this.listArr.length
            //         if (this.listCount < this.total) {
            //             this.$refs['scroll0'].forceUpdate(true)
            //         } else {
            //             this.$refs['scroll0'].forceUpdate(false)
            //         }
            //     }
            // }
        // )
        }
    }
}
</script>
<style lang="less" scoped>
    .retrospect {
        width: 100%;
        height: 100%;
        background-color: #EBEEF2;
        display: flex;
        flex-direction: column;
        .content {
            flex: 1;
            overflow-y: hidden;
            margin-top: 15px;
            .item {
                background-color: #fff;
                padding: 10px;
                height: 80px;
                overflow: hidden;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f2f2f2;
                .left-content {
                    position: relative;
                    flex: 3;
                    font-size: 14px;
                    .head-img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        border: 1px solid #eee;
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .head-info {
                        height: 100%;
                        position: absolute;
                        left: 50px;
                        top: 50%;
                        transform: translateY(-50%);
                        padding: 10px 0;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        h3 {
                            font-weight: bold;
                        }
                        p {
                            width: 45.333vw;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                .right-content {
                    text-align: right;
                    font-size: 14px;
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .date {
                        font-weight:bold;
                        color:red;
                        padding-bottom: 5px;
                    }
                    .dateblue {
                        font-weight:bold;
                        color: #2269FC;
                        padding-bottom: 5px;
                    }
                    .trace {
                        font-size: 12px;
                        color: #2269FC;
                        border: 1px solid #2269FC;
                        background-color: #DAE6FE;
                        height: 28px;
                        line-height: 28px;
                        text-align: center;
                        border-radius: 14px;
                    }
                }
            }
        }
    }
</style>